<template>
    <div>
      <i-tabs :current="current" @change="handleChange" fixed color="#41B962">
          <i-tab key="tab1" title="全部">
          </i-tab>
          <i-tab key="tab2" title="待付款"></i-tab>
          <i-tab key="tab3" title="待收货"></i-tab>
          <i-tab key="tab4" title="已完成"></i-tab>
        </i-tabs>
        <p v-if="goods === ''" class="tc f14" style="margin-top: 45px;">没有更多信息了</p>
        <div v-else class="mt50">
          <ul v-if="current === 'tab1'">
            <li v-for="orders in ordersManager" :key="orders.index">
              <header @click="orderDetails(orders)"><p class="f15">{{orders.orderId}}</p><p class="f12 tr" style="color: #F95318;">{{orders.status}}</p></header>
              <list-goods :goods="goods"></list-goods>
              <footer>
                <main>
                  <p class="f15">2018.10.15 18:05</p>
                  <p class="tr f12" style="flex: 1;">共<span>{{goods.goodMounts}}</span>件商品 实付：<span>￥</span><span class="f16">{{goods.totalPrice}}</span></p>
                </main>
                <div v-if="orders.status === '待付款'">
                  <i-button @click="handleClick" inline shape="circle" i-class="order-button">取消</i-button>
                  <i-button @click="handleClick" inline shape="circle" type="success" i-class="order-button">付款</i-button>
                </div>
                <div v-else-if="orders.status === '待收货'">
                  <i-button @click="handleClick" inline shape="circle" i-class="order-button">退款</i-button>
                  <i-button @click="handleClick" inline shape="circle" type="success" i-class="order-button">确认</i-button>
                </div>
                <div v-else>
                  <i-button @click="handleClick" inline shape="circle" i-class="order-button">评价</i-button>
                </div>
              </footer>
            </li>
          </ul>
          <ul  v-else-if="current === 'tab2'">
            <li v-for="orders in ordersManager" :key="orders.index" v-if="orders.status === '待付款'">
              <header  @click="orderDetails(orders)"><p class="f15">{{orders.orderId}}</p><p class="f12 tr" style="color: #F95318;">{{orders.status}}</p></header>
              <list-goods :goods="goods"></list-goods>
              <footer>
                <main>
                  <p class="f15">2018.10.15 18:05</p>
                  <p class="tr f12" style="flex: 1;">共<span>{{goods.goodMounts}}</span>件商品 实付：<span>￥</span><span class="f16">{{goods.totalPrice}}</span></p>
                </main>
                <div>
                  <i-button @click="handleClick" inline shape="circle" i-class="order-button">取消</i-button>
                  <i-button @click="handleClick" inline shape="circle" type="success" i-class="order-button">付款</i-button>
                </div>
              </footer>
            </li>
          </ul>
          <ul  v-else-if="current === 'tab3'">
            <li v-for="orders in ordersManager" :key="orders.index" v-if="orders.status === '待收货'">
              <header  @click="orderDetails(orders)"><p class="f15">{{orders.orderId}}</p><p class="f12 tr" style="color: #F95318;">{{orders.status}}</p></header>
              <list-goods :goods="goods"></list-goods>
              <footer>
                <main>
                  <p class="f15">2018.10.15 18:05</p>
                  <p class="tr f12" style="flex: 1;">共<span>{{goods.goodMounts}}</span>件商品 实付：<span>￥</span><span class="f16">{{goods.totalPrice}}</span></p>
                </main>
                <div>
                  <i-button @click="handleClick" inline shape="circle" i-class="order-button">退款</i-button>
                  <i-button @click="handleClick" inline shape="circle" type="success" i-class="order-button">确认</i-button>
                </div>
              </footer>
            </li>
          </ul>
          <ul  v-else>
            <li v-for="orders in ordersManager" :key="orders.index" v-if="orders.status === '已完成'">
              <header  @click="orderDetails(orders)"><p class="f15">{{orders.orderId}}</p><p class="f12 tr" style="color: #F95318;">{{orders.status}}</p></header>
              <list-goods :goods="goods"></list-goods>
              <footer>
                <main>
                  <p class="f15">2018.10.15 18:05</p>
                  <p class="tr f12" style="flex: 1;">共<span>{{goods.goodMounts}}</span>件商品 实付：<span>￥</span><span class="f16">{{goods.totalPrice}}</span></p>
                </main>
                <div>
                  <i-button @click="handleClick" inline shape="circle" i-class="order-button">评价</i-button>
                </div>
              </footer>
            </li>
          </ul>
          <p class="f12 tc pt20 pb10" style="color: #A2A2A2">我们也是有底线的</p>
        </div>
    </div>
</template>

<script type="ECMAScript 6">
    import listGoods from '@/components/list-goods';
    let datas = require('../../../../data');
    export default {
        name: 'my-order',
        components: {
            listGoods
        },
        data () {
            return {
                current: 'tab1',
                showGoods: 3,
                selected: '1',
                loading: false,
                goods: '',
                ordersManager: [{id: 1, orderId: 'M525549501188', status: '待付款', payStatus: '等待买家付款'}, {id: 2, orderId: 'M525598778565d', status: '待收货', payStatus: '商家已发货'}, {id: 3, orderId: 'M525549501188', status: '待付款', payStatus: '等待买家付款'}, {id: 4, orderId: 'M5255495565', status: '待收货', payStatus: '商家已发货'}, {id: 4, orderId: 'M5255495565', status: '已完成', payStatus: '交易完成'}]
            };
        },
        onShow () {
          let id = this.$root.$mp.query.id;
          this.tab = `tab${id}`;
        },
        methods: {
            orderDetails (orders) {
              let url = './my-order-details/main?id=' + JSON.stringify(orders);
              mpvue.navigateTo({ url });
            },
            handleChange (el) {
              this.current = el.mp.detail.key;
            }
        },
        created () {
          this.goods = datas.goods;
        }
    };
</script>

<style lang="stylus" scoped>
 ul
   li
    margin-bottom 5px; background #fff;
    header
     display flex; align-items center; padding 0 13px; height 40px; line-height 40px; border-bottom 1px solid #E9E9E9;
     p
      flex 1;
   footer
      main
          line-height 40px; display flex; align-items center; height 40px; margin 0 13px; border-bottom 1px solid #E9E9E9;
          span
              color #F95318;
      div
        padding 10px; text-align right;
</style>
<style lang="stylus">
  .order-button
    margin 0 10px!important; height 30px!important; line-height 30px!important; width 70px!important;
</style>
